<template>
    <el-row class="leftNav">
        <el-row class="leftNavList">
          <router-link to="/main/client" class="navContent">
            <span class="icon menu1"></span>
            <p class="text">客户列表</p>
          </router-link>
          <router-link to="/main/price" class="navContent">
            <span class="icon menu2"></span>
            <p class="text">报价设置</p>
          </router-link>
          <router-link to="/main/permission" class="navContent">
            <span class="icon menu3"></span>
            <p class="text">权限设置</p>
          </router-link>
          <router-link to="/main/organization" class="navContent">
            <span class="icon menu4"></span>
            <p class="text">组织架构</p>
          </router-link>
        </el-row>
    </el-row>
</template>
<script>
    export default {
        data() {
          return{
            typeNum:1
          }
        },
      methods:{
        changeNav(index){
          this.typeNum = index
        }
      }
    }

</script>

<style lang="less">
  .leftNav{
    width: 223px;
    margin-top: 80px;
    position: fixed;
    z-index: 20;
  }
  .leftNavList{
    width: 180px;
    position: absolute;
    right: 0;
    top: 20px;
    padding: 30px 0;
    background:white;
    box-shadow: 0 0 6px #e7e7e7;
    text-align: center;
  }
  .navContent{
    text-decoration: none;
    display: block;
    padding: 20px 0
  }
  .icon{
    display: inline-block;
    width: 30px;
    height: 30px;
  }
  .menu1{
    background: url("../../../src/assets/images/menu1-b.png") no-repeat center center
  }
  .menu2{
    background: url("../../../src/assets/images/menu2-b.png") no-repeat center center
  }
  .menu3{
    background: url("../../../src/assets/images/menu3-b.png") no-repeat center center
  }
  .menu4{
    background: url("../../../src/assets/images/menu4-b.png") no-repeat center center
  }
  .text{
    color: grey;
    margin: 0;
  }
  .router-link-active{
    .text {
      color: #fff !important
    }
    background: #ffa44c !important;
    .menu1
    { background: url("../../../src/assets/images/menu1-w.png") no-repeat center center}
    .menu2{
      background: url("../../../src/assets/images/menu2-w.png") no-repeat center center
    }
    .menu3{
      background: url("../../../src/assets/images/menu3-w.png") no-repeat center center

    }
    .menu4{
      background: url("../../../src/assets/images/menu4-w.png") no-repeat center center

    }
  }
</style>
